<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ page import="java.sql.*" %>     
 <%@page import="com.Datetools"%>
<%@page import="java.util.*"%>
<%@page import="java.text.SimpleDateFormat"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1" />  
<%@ include file="../bootstrap.jsp"%>
<title>教师打卡</title>

    <style type="text/css">
    body {
    background:white;
    
    
    }
    br{
    height:1px
    }
        .container{
            width: 100%;
            height: 1400px;
            border: 1em solid white;
            
            background-color: white;
        }
        
        .common{
            display:none
       
        }
        
 
        /* 设置头部样式 */
        .title{
            width: 100%;
            height: 10%;
            border: 0em solid red;
           
            background-color: pink;
        }
 
        /* 设置导航样式 */
        .navbottle{
            width: 100%;
            height: 5%;
            color: white;
            background-color: white;
        }
 
        /* 设置主体内容样式 */
        .content{
            height: 60%;
            width: 100%;
            background-color: lightblue;
            
        }
 
        /* 设置主体内容左列的样式 */
        .content .demo1{
            width: 20%;
            height: 100%;
            /*高度设置为100%的时候表示占满容器 那么后期就无法设置该盒子的上外边距和下外边距
            但是可以设置px为单位作高度 只要不把父容器占满即可
            */
            background-color: 	lightblue;
            
            float: left;
        }
 
        /* 设置主体内容的中间的内容的样式 */
        .content .demo2{
            width: 60%;
            height: 100%;
            background-color: white;
            float: left;
            
        }     
        
        /* 设置主体内容右列的样式 */
        .content .demo3{
            width: 20%;
            height: 100%;
            background-color: 	lightblue;
            float: right;
        }
 
       
 
        /* 设置底部 */
        .bottom{
            width: 100%;
            height: 10%;
            background-color: lightslategray;
            
            text-align:match-parent;
            
        }
        .button {
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    background-color: #6496c8;
	border: none;
	border-radius: 1em;
	box-shadow: 0 0.5em #27496d;
    font-size: 5 em;
    margin-top:2 em;
    display:block;
    margin:0 auto
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}
.sectitle{
text-align:center;
background-color:white;
}
        </style>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script>
</head>
<body>
<div class="col-md-10 col-sm-8 col-xs-12"> 
    <div class="container">
        <div class="navbottle">
        <nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="teachhome.jsp">返回</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="teachhome.jsp"></a>
       
      </ul>
    </div>
  </div>
</nav>
        </div>
        <div class="tittle">
        <img src="${pageContext.request.contextPath}/images/swufelogo.jpg" alt="swufe logo"  height=100% width=100%>
        </div>
        <div class="content">
            <div class="demo1"></div>
            <div class="demo2" >
            <div   style="font-size: 18px;width:100%">
             <div class="sectitle"><h3>每日健康打卡</h3></div><br>
            <form method="post" action="clocksave.jsp">
            <%
            String UserNum=(String)request.getSession().getAttribute("UserNum");
            %>  
<input class="common" onClick="laydate({elem:'#startDate'});" 
                dateFormat="short" name="Date" id="startDate" 
                value="<%=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(Calendar.getInstance().getTime())%>">   
1·本人今日旅居地<br>
<input type="text"  name="location" id="location" placeholder="点击获取定位" readonly="readonly"  style="width:60%; " required></input>
<button class="btn btn-outline-success" onclick="getLocation2()" name="location">点我</button> <br>
<p id="demo" style="display:none">点击按钮获取您当前坐标（可能需要比较长的时间获取：</p>
<p id="allmap" style="display:none"></p>
<input type="text" name="place" placeholder="请输入详细地址如：xx小区xx单元xx号" style="width:60%;margin-top:2px " required></input><br>
<br>
2·本人今日是否离(返)蓉<br>
 <input type="radio" name="chendu"  value="是"required>是
    <input type="radio" name="chendu" value="否"required>否<br>
    <br>
3·本人今日健康码状态<br>
<input type="radio" name="code" value="绿码"required>绿码
    <input type="radio" name="code"value="黄码"required>黄码
    <input type="radio" name="code"value="红码"required>红码<br>
    <br>
4·本人今日身体健康状态是否出现异常<br>
 <input type="radio" name="body"  value="是"required>是
    <input type="radio" name="body" value="否"required>否<br>
    <br>
5·本人今日居住区是否被纳入管控区<br>
 <input type="radio" name="guankong"  value="是"required>是
    <input type="radio" name="guankong"value="否"required>否<br>
    <br>
6·本人今日是否与确诊人员接触<br>
 <input type="radio" name="mijie" value="是"required>是
    <input type="radio" name="mijie"value="否"required>否<br>
    <br>
7·本人今日是否完成核酸<br>
 <input type="radio" name="hesuan" value="是"required>是
    <input type="radio" name="hesuan"value="否"required>否<br>
    <br>
8·本人承诺以上信息全部属实<br>
 <input type="radio" name="promise" value="是"required>是
 <br>


<input class="button" type="submit" value="提交" onclick="select();"/>
</form>
</div> 
            </div>
            <div class="demo3"></div>
        </div>
        <div class="bottom" ></div>
    </div>
    </div>
    <script>
var x=document.getElementById("demo");

//获取经纬度，用百度API计算位置信息
function getLocation()
{
	if (navigator.geolocation)
	{
		navigator.geolocation.getCurrentPosition(showPosition,showError);
	}
	else
	{
		x.innerHTML="该浏览器不支持定位。";
	}
}
function showPosition(position)
{
	x.innerHTML="纬度: " + position.coords.latitude + 
	"<br>经度: " + position.coords.longitude;	
	
   var loc=document.getElementById("location");
   var map = new BMap.Map("allmap"); 
	var point = new BMap.Point(position.coords.longitude,position.coords.latitude); 
	map.centerAndZoom(point,12); 
	var geoc = new BMap.Geocoder(); 
	geoc.getLocation(point,function(rs){ 
	var addComp = rs.addressComponents; 
	 console.info(addComp);
	 alert(addComp.province + "," + addComp.city + "," + addComp.district +"," + addComp.street + "," + addComp.streetNumber); 
	//alert(addComp.province + "," + addComp.city + "," + addComp.district); 
	loc.value=addComp.province + "," + addComp.city + "," + addComp.district;
	}); 
 	
	
}

function select(){
    form.action="../clocksave.jsp";
    form.submit();  
    }
    
function showError(error)
{
	switch(error.code) 
	{
		case error.PERMISSION_DENIED:
			x.innerHTML="用户拒绝对获取地理位置的请求。"
			break;
		case error.POSITION_UNAVAILABLE:
			x.innerHTML="位置信息是不可用的。"
			break;
		case error.TIMEOUT:
			x.innerHTML="请求用户地理位置超时。"
			break;
		case error.UNKNOWN_ERROR:
			x.innerHTML="未知错误。"
			break;
	}
}

//方法二，chrome浏览器可用
function getLocation2() {
    // 创建百度地理位置实例，代替 navigator.geolocation
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(e) {
    	 var loc=document.getElementById("location");
         var map = new BMap.Map("allmap"); 
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
            x.innerHTML = '纬度：' + e.point.lat + '<br/>经度：' + e.point.lng;
           
           
         	var point = new BMap.Point(e.point.lng,e.point.lat); 
         	map.centerAndZoom(point,12); 
         	var geoc = new BMap.Geocoder(); 
         	geoc.getLocation(point,function(rs){ 
         	var addComp = rs.addressComponents; 
         	 console.info(addComp);
         	alert(addComp.province + "," + addComp.city + "," + addComp.district +"," + addComp.street + ","  + addComp.streetNumber); 
         	//alert(addComp.province + "," + addComp.city + "," + addComp.district); 
         	loc.value=addComp.province + "," + addComp.city + "," + addComp.district +"," + addComp.street + ","  + addComp.streetNumber;
         	});  
            
        } else {
            x.innerHTML = 'failed' + this.getStatus();
        }
    });
}

</script>
</body>
</html>